<template>
  <div class="table-column-container">
    <div v-for="(child, idx) in children" :style="{display: horizontal ? 'inline-block' : 'block'}" :key="idx"
         class="table-column-content">
      <div v-if="!child.children" :class="child.hover ? 'column-hover' : ''">
        <i v-if="child.icon" :class="getIconClass(child)" class="iconfont mar-rgt-10"></i>
        <div v-else-if="child.image">
          <div v-if="data[child.key] && data[child.key].length>0" class="table-cell-image-container">
            <!-- <el-popover
              v-for="(file, idx) in getImage(data[child.key])"
              :key="idx"
              :open-delay="500"
              placement="right"
              trigger="hover">

              <img :src="`${fileBaseUrl}${file}`" width="200px" height="200px">
              <img
                slot="reference"
                :src="`${fileBaseUrl}${file}`"
                class="cursor-pointer table-cell-image size-40">
            </el-popover> -->
            <el-image style="width: 40px; height: 40px" :src="getImage(data[child.key])[0]"
                      :preview-src-list="getImage(data[child.key])" fit="contain">
            </el-image>
          </div>
          <div v-else>
            --
          </div>
        </div>
        <div v-else-if="child.button">
          <el-button v-if="judgeOptShow(child)" :class="child.class" :type="`${child.btnType ? child.btnType : 'info'}`"
                     size="mini" class="mar-rgt-10" @click="child.callback({type: child.type, data: data})">
            {{child.label}}
          </el-button>
        </div>
        <div v-else-if="child.dropdown">
          <el-dropdown v-if="showDropdown(child.options)" trigger="click" class="mar-rgt-10" @command="child.callback">
            <div class="table-column-dropdown">
              <i class="iconfont icon-gengduocaozuo"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="opt in getDropdownOpts(child.options)" :key="opt.label" :class="opt.class"
                                :command="{type: opt.type, data: data}">
                <i :class="opt.icon" class="font-size-second iconfont"></i>
                <span :class="opt.color">{{opt.label}}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-else-if="child.updatedDate" class="display-inline-block">
          <el-tooltip class="item" effect="dark" placement="top" :open-delay="800">
            <div slot="content">
              <div class="mar-top-5">{{updateDateInfo.lastUpdatedAt}}, {{updateDateInfo.lastUpdatedAtFromNow}}</div>
              <div>{{updateDateInfo.createdAt}}, {{updateDateInfo.createdAtFromNow}}</div>
              <div>{{updateDateInfo.lastUpdatedByName}}</div>
              <div>{{updateDateInfo.createdByName}}</div>
            </div>
            <div :style="{maxWidth: `${(child.width || parent.width) - 20}px`}" class="limited-text">
              {{updateDateInfo.lastUpdatedAtFromNow}}&nbsp;&nbsp;<i class="el-icon-info"></i>
            </div>
          </el-tooltip>
        </div>
        <div v-else :class="child.class" class="font-weight-normal mar-rgt-10">
          <span v-if="child.tooltip && data[child.key]"
                :class="child.hover ? `column-hover ${tableId}-column-tooltip-content` : `${tableId}-column-tooltip-content`"
                :content="data[child.key] || '--'" v-html="data[child.key] || '--'"></span>
          <span v-else :class="child.hover ? 'column-hover' : ''" v-html="getDataMap(data[child.key],child)"></span>
        </div>
      </div>
      <EZColumn v-else :data="data" :parent="child" :children="child.children" :horizontal="child.horizontal">
      </EZColumn>
    </div>
  </div>
</template>

<script>
  import {assetBaseUrl} from '@/config/env';
  import {formatMeta} from "@/utils";

  export default {
    name: 'EZColumn',
    props: {
      tableId: {
        type: String,
        default: ''
      },
      // 是否为水平布局
      horizontal: {
        type: Boolean,
        default: false
      },
      // 可能需要用到上一级的信息，以 parent 传递
      // 比如 label 的 width，需要作为 cell 的 max-width
      parent: {
        type: Object,
        default: () => {
          return {};
        }
      },
      // 子组件
      children: {
        type: Array,
        default: () => {
          return [];
        }
      },
      // table row 数据
      data: {
        type: Object,
        default: () => {
          return {};
        }
      },
      // 当前列是否可悬浮点击
      hover: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        fileBaseUrl: `${assetBaseUrl}/file/download/`
      };
    },
    computed: {
      updateDateInfo() {
        return formatMeta(this.data);
      }
    },
    methods: {
      getIconClass(config = {}) {
        return `${config.class || 'font-size-main'} ${this.data[config.key] || ''}`;
      },
      getImage(images = []) {
        if (!images) return [];
        return images.map(image => {
					const {filePath = ''} = image;
          return this.fileBaseUrl + filePath;
        });
      },
      getDataMap(mapData, child) {
        if (!child.hasOwnProperty('mapFunc')) return (mapData || '--')
        return child.mapFunc(mapData);
      },
      // 判断操作项是否显示（按钮、下拉菜单项）
      judgeOptShow(operation = {}) {
        const {hide, showKey = '', key = '', values = [], reverse = false} = operation;
        if (hide) return false;

        // 再判断是否有设置 showKey，如果有，且值为 false，则直接返回 false
        // 比如告警记录列表的 "恢复告警"、巡检执行列表的 "查看结果"
        if (showKey && !this.data[showKey]) return false;

        // 再判断是否需要根据数据源的某个字段的值来决定显示/隐藏
        // reverse 表示是否需要逻辑取反
        if (key && values.length) {
          const include = values.includes(this.data[key]);
          return reverse ? !include : include;
        }

        // 其他则为普通情况，返回 true
        return true;
      },
      // 是否显示下拉菜单
      showDropdown(options = []) {
        let show = false;
        for (let i = 0; i < options.length; i++) {
          const opt = options[i];
          if (this.judgeOptShow(opt)) {
            show = true;
            break;
          }
        }
        return show;
      },
      // 下拉菜单选项
      getDropdownOpts(options = []) {
        const dropdownOpts = [];
        options.forEach(opt => {
          if (this.judgeOptShow(opt)) {
            dropdownOpts.push(opt);
          }
        });
        return dropdownOpts;
      },
    }
  };
</script>

<style scoped lang="less">
  .table-column-container {
    display: inline-block;

    div {
      display: inline-block;
    }

    .table-column-content {
      vertical-align: middle;
    }
  }

  .hover-success:hover {
    color: @colorSuccess !important;
    border-color: @colorSuccess !important;
  }

  .hover-warning:hover {
    color: @colorWarning !important;
    border-color: @colorWarning !important;
  }

  .hover-danger:hover {
    color: @colorDanger !important;
    border-color: @colorDanger !important;
  }

  .hover-font-success:hover {
    color: @colorSuccess !important;
  }

  .hover-font-warning:hover {
    color: @colorWarning !important;
  }

  .hover-font-danger:hover {
    color: @colorDanger !important;
  }

  .column-hover:hover {
    cursor: pointer;
    text-decoration: underline;
    color: @colorPrimary;
  }
</style>
